<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
        外边距塌陷问题
        我们设置了上下两个盒子，大盒子套了一个小盒子
        这时设置小盒子的外边距，我们想要的是拉开两个盒子之间的距离
        结果大小盒子都往下移动了，大小盒子并没有拉开距离。
    
        解决方案
        方式一 取消子级margin 父级设置padding，子级不再需要margin
        方案二 父级设置overflow:hidden，子级margin还需要存在
        方案三 父级设置 border-top，子级margin还需要存在
    */
    .box1 {
        width: 400px;
        height: 400px;
        background-color: pink;
        /* padding: 30px; */
        /* overflow: hidden; */
        border-top: 1px solid #000;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        margin: 100px;
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>

</html>